<template>
  <div class="login">
    <div class="login_t">
      <img class="login_t_img" src="../assets/logo.png" />
      <div class="login_t_v">登 录</div>
    </div>
    <div class="denl">
      <div class="denl_t">欢迎登录</div>
      <div class="denl_c">
        <el-form :model="form" style="width: 90%; margin: 0 auto;">
          <el-form-item label="用户名:" :label-width="formLabelWidth">
            <el-input v-model="form.userName" placeholder="请输入用户名" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码:" :label-width="formLabelWidth">
            <el-input v-model="form.password" placeholder="密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-button type="primary" style="width: 100%; margin-top: 40px;" @click="loginBtn">登 录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userLoginApi //用户登录
} from "@/api/api";

export default {
  name: 'login',
  data() {
    return {
      form: {
        userName: '', //用户名
        password:''//密码
      },
      formLabelWidth: '60px'
    }
  },
  methods: {
    loginBtn(){
      console.log('点击登录')
      console.log(this.form)
      if(this.form.userName.trim()===''){
        this.$message({
          message: '用户名不能为空',
          type: 'warning'
        });
        return
      }
      if(this.form.password.trim()===''){
        this.$message({
          message: '密码不能为空',
          type: 'warning'
        });
        return
      }

      userLoginApi(this.form).then(res=>{
        console.log('登录结果')
        console.log(res)
        // 如果登录成功跳转首页
        if(res.success){
          console.log('cookie')
          console.log(document.cookie)
          this.$router.push({path:'/userlist'})
        }else{
          this.$message.error(res.errorMessage);
        }
      })
    }
    
  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.login {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #c7ebf7, #6f9596);
}

.login_t {
  width: 80%;
  height: 120px;
  line-height: 120px;
  padding: 0 10%;
  display: flex;
  /* background: #c7ebf7; */
}

.login_t_img {
  width: 100px;
  height: auto;
}

.login_t_v {
  font-size: 28px;
  /* font-weight: bold; */
  margin-left: 30px;
}

.denl {
  width: 500px;
  height: 360px;
  background: #fff;
  position: fixed;
  top: 50%;
  margin-top: -180px;
  left: 50%;
  margin-left: -250px;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #fff;
}

.denl_t {
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #6f9596;
  margin: 40px 0;
}</style>